<template>
      <!--send box s-->
  <div class="letter_send_box">
        <p class="wrap_id">
          输入收到信件上面的ID
        </p>
        <div class="input_ID_box" v-on:click="input_box" >
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
              <li></li>
              <li></li>
            </ul>
          <input type="text" minlength="8" maxlength="8" class="input_hidden" ref="input_s"  v-on:input="inputFunc">
        </div>
        <!--wrap_ok_singe-->
        <div class="cirle">&nbsp;</div>

        <div class="red_btn" v-on:click="certain_jump">
          确认收件
        </div>
      <!--send box e-->
     </div>
</template>
<script>
//import '../../../static/css/Letter/letter.css';
import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
//import store from '../vuex/store_index';
import "../../../static/css/Letter/Certain_Letter.css"
import { Toast } from 'mint-ui';
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  methods: {
    //页面跳转
    certain_jump: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    input_box:function () {
          this.$refs.input_s.focus();
    },
    //输入框 input 的钩子
    inputFunc:function (e) {
      Toast( this.$refs.input_s.value)
    }
  }
}
</script>
<style scoped>
  .letter_send_box{
      height: 21.45rem;
  }
  .wrap_id{
    letter-spacing: 1px;
  }
  .red_btn{
    width: 25vw;
  }
  /*input_ID_box */
</style>


